<template>
  <div class="container">
    <div class="input-group">
      <label for="sender">发送人编号:</label>
      <input type="text" id="sender" v-model="senderId">
    </div>
    <div class="input-group">
      <label for="receiver">接收人编号:</label>
      <input type="text" id="receiver" v-model="receiverId">
    </div>
    <div class="button-group">
      <button @click="loadContent">加载</button>
        <button :disabled="tableData.length==0" @click="formVisible=true">查看记录</button>
    </div>
    <div class="content-area" id="main">
        
    </div>

    <el-dialog title="数据记录" :visible.sync="formVisible" top="5vh" width="60%" :before-close="$utils.handleClose">
                  <message :tableData="tableData"></message>
            </el-dialog>
  </div>
</template>

<script>
import message from './message.vue';
export default {
    components:{
        message
    },
  data() {
    return {
      senderId: '',
      receiverId: '',
      message: [],
      myChart:'',
      tableData:[],
      formVisible:false
    }
  },
  methods: {
    loadContent() {
        this.tableData=[];
        if(this.senderId && this.receiverId){
            this.$axios.get(this.$url+'/client/exchangeMessage/chat?creator='+this.senderId+'&receive='+this.receiverId).then(res=>{
                this.tableData=res.data.data.messageList;
                
                var option = {
                title: {
                    text: '交流数据取证',
                    subtext: '交流涉及关键词',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data:res.data.data.chat,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
                };

                option && this.myChart.setOption(option);
            })
        }
    }
  },
  mounted() {
    var chartDom = document.getElementById('main');
    this.myChart = this.$echarts.init(chartDom);
  }

}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.input-group label {
  margin-right: 10px;
}

.input-group input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
}

.button-group {
  margin-bottom: 20px;
}

.button-group button {
  padding: 5px 30px;
  border-radius: 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.content-area {
  height: 500px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 10px;
  overflow-y: auto;
}

.content-area p {
  margin: 0;
  margin-bottom: 10px;
}
</style>
